<template>
  <n-card :bordered="false" class="proCard">
    <div class="w-[100%] flex">
      <div class="w-[500px]">
        <div class="flex items-center mb-[20px]"
          ><span class="whitespace-nowrap">类型：</span
          ><n-select v-model:value="value" :options="options"
        /></div>
        <div class="flex">
          <span class="whitespace-nowrap">文件：</span>
          <n-upload
            accept=".xls, .xlsx"
            directory-dnd
            :default-upload="false"
            :on-change="onChange"
            :max="1"
            ref="nUpload"
          >
            <n-upload-dragger>
              <div style="margin-bottom: 12px">
                <n-icon size="48" :depth="3">
                  <archive-icon />
                </n-icon>
              </div>
              <n-text style="font-size: 16px"> 点击或者拖动文件到该区域来上传 </n-text>
              <n-p depth="3" style="margin: 8px 0 0 0"> 请选择xsl后缀的文件 </n-p>
            </n-upload-dragger>
          </n-upload>
        </div>
        <div class="flex justify-end">
          <n-button type="primary" @click="uploadFile" :loading="loading" >{{
            loading ? '上传中...' : '上传'
          }}</n-button>
          </div
        >
      </div>
      <div class="flex-1 pl-[20px]"
        >
        <div class="mb-[12px] "><span class="mr-[20px] font-bold">礼品卡全新剩余可用数量</span>
        <n-button type="primary" @click="showGiftCountFuc" :loading="tableLoading"
                    >刷新</n-button
                  >
        </div>
        <n-table striped>
          <thead>
            <tr>
              <th>0-10</th>
              <th>10-20</th>
              <th>20-30</th>
              <th>30-40</th>
              <th>40-50</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tableList" :key="index">
              <td>{{ item[0] }}</td>
              <td>{{ item[1] }}</td>
              <td>{{ item[2] }}</td>
              <td>{{ item[3] }}</td>
              <td>{{ item[4] }}</td>
            </tr>
          </tbody>
        </n-table>
      </div>
    </div>
  </n-card>
</template>

<script lang="ts">
  import { defineComponent, ref, watch, toRaw, onMounted } from 'vue';
  import { ArchiveOutline as ArchiveIcon } from '@vicons/ionicons5';
  import { uploadFileFunc, showGiftCount } from '@/api/upload/index';
  import { useMessage } from 'naive-ui';
  export default defineComponent({
    components: {
      ArchiveIcon,
    },
    setup() {
      const value = ref('credit');
      const nUpload = ref<any>(null);
      let fileList: Array<any> = [];
      const tableList = ref([]);
      const message = useMessage();
      const loading = ref(false);
      const tableLoading = ref(false);
      watch(
        () => value.value,
        () => {
          fileList = [];
          nUpload.value?.clear!();
        }
      );
      function success(text) {
        message.success(text);
      }
      function error(text) {
        message.error(text);
      }
      function reset() {
        value.value = 'credit';
        fileList = [];
        nUpload.value?.clear!();
      }
      function onChange(options) {
        fileList = options.fileList;
      }
      function showGiftCountFuc() {
        tableLoading.value = true;
        showGiftCount()
          .then((list) => {
            tableList.value = list;
            success('获取成功');
          })
          .finally(() => {
            tableLoading.value = false;
          });
      }
      function uploadFile() {
        if (!fileList.length) {
          return;
        }
        loading.value = true;
        uploadFileFunc({
          file: fileList[0] && fileList[0].file,
          data: {
            type: toRaw(value.value),
          },
        })
          .then((res: any) => {
          console.log(res)
            if (res.data.code == 200) {
              reset();
              success(res.data.message);
              showGiftCountFuc();
            } else {
              error(res.data.message);
            }
            // message
          })
          .finally(() => {
            loading.value = false;
          });
      }
      onMounted(() => {
        showGiftCountFuc();
      });
      return {
        value,
        nUpload,
        loading,
        options: [
          {
            label: '信用卡上传',
            value: 'credit',
          },
          {
            label: '礼品卡上传',
            value: 'gift',
          },
          {
            label: '订单信息上传',
            value: 'order',
          },
        ],
        onChange,
        uploadFile,
        showGiftCountFuc,
        tableLoading,
        tableList,
      };
    },
  });
</script>
<style lang="less" scoped>
  .n-upload-dragger {
    padding: 10px 5px;
  }
</style>
